import React from 'react';
import {Button, Icon, message} from 'antd';
import {WeaDialog, WeaSearchGroup, WeaFormItem, WeaInput, WeaTable, WeaCheckbox, WeaSelect, WeaError, WeaInputNumber} from 'ecCom';
import {WeaLocaleProvider} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
import {WeaMaterialLib} from 'weaPortalPublic';

// 幻灯片详细设置
export default class Content_Slide_detail extends React.Component {
    state = {
        eSlideDetail: this.props.eSlideDetail,
        showTitle: this.props.showTitle || '0',
        fontSize: this.props.fontSize|| '16',
        showType: this.props.showType|| '1',
    };

    constructor(props) {
        super(props);
        this.getButtons = this.getButtons.bind(this);
        this.onOk = this.onOk.bind(this);
        this.onCancel = this.onCancel.bind(this);
        this.getItems = this.getItems.bind(this);
    }

    getItems(){
        const { showTitle, fontSize, showType } = this.state;
        const options = [
            {
                key: "1",
                showname: getLabel(514068,'黑底白字') ,
                selected: true,
            },{
                key: "2",
                showname: getLabel(514069,'白底黑字') ,
                selected: false,
            }
        ];
        const items= [
            {com:<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@2nzyei`}
                    label={getLabel(386587, '显示标题栏')}
                    labelCol={{span: 8}}
                    wrapperCol={{span: 14}}>
                    <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@hui7z7`}
                        value={showTitle}
                        display="switch"
                        id='test'
                        style={{display: 'inline'}}
                        onChange={(value)=>this.setState({showTitle: value})}
                    />
                </WeaFormItem>},
            {com:<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@7fh70v`}
                    label={getLabel(386588, '标题文字大小')}
                    labelCol={{span: 8}}
                    wrapperCol={{span: 14}}
                >
                    <div style={{display: 'inline-block'}}>
                        <div style={{display: 'inline-block', width: '82px'}}>
                            <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@68gttx`} min={0} value={fontSize} onChange={(value)=>this.setState({fontSize: value})} style={{width: '82px', display: 'inline-block'}}/>
                        </div>
                        <div style={{display: 'inline-block', marginLeft: '10px'}}>px</div>
                    </div>
                </WeaFormItem>},
            {com:<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@05ocik`}
                    label={getLabel(501242,'标题栏样式') }
                    labelCol={{span: 8}}
                    wrapperCol={{span: 14}}
                >
                    <div style={{display: 'inline-block'}}>
                        <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@60afvv`}
                            options={options}
                            value={showType}
                            detailtype={3}
                            onChange={(value)=>this.setState({showType: value})}
                            style={{display: 'inline-block'}}/>
                    </div>
                </WeaFormItem>}
        ]
        return items;
    }

    render() {
        const { showTitle } = this.state;
        const columns = [{
            title: getLabel(26283, '主图片'),
            dataIndex: 'mainImage',
            render: (text, record) => (
                <WeaMaterialLib ecId={`${this && this.props && this.props.ecId || ''}_WeaMaterialLib@jpsr9k`} value={text} onChange={this.onDetailChange.bind(this, record.key, 'mainImage')}/>
            )
        }, {
            title: getLabel(26284, '导航样式背景图'),
            dataIndex: 'bgImage',
            render: (text, record) => (
                <WeaMaterialLib ecId={`${this && this.props && this.props.ecId || ''}_WeaMaterialLib@oxg5ah`} value={text} onChange={this.onDetailChange.bind(this, record.key, 'bgImage')}/>
            )
        }, {
            title: getLabel(386598, '导航样式前景图'),
            dataIndex: 'fgImage',
            render: (text, record) => (
                <WeaMaterialLib ecId={`${this && this.props && this.props.ecId || ''}_WeaMaterialLib@y4i6cm`} value={text} onChange={this.onDetailChange.bind(this, record.key, 'fgImage')}/>
            )
        }, {
            title: getLabel(24986, '标题'),
            dataIndex: 'title',
            render: (text, record) => (
                <WeaError ecId={`${this && this.props && this.props.ecId || ''}_WeaError@sj0rhg`}
                    //tipPosition='bottom'
                    ref={el => {this[`weaError_${record.key}`] = el}}
                    error='标题为空'>
                    <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@8pdqn5`} value={text} viewAttr={showTitle == '1' ? 3: 2} onChange={this.onDetailChange.bind(this, record.key, 'title')}/>
                </WeaError>
            )
        }, {
            title: getLabel(433, '描述'),
            dataIndex: 'desc',
            render: (text, record) => (
                <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@8kqpqa`} value={text} onChange={this.onDetailChange.bind(this, record.key, 'desc')}/>
            )
        }, {
            title: getLabel(22932, '图片链接'),
            dataIndex: 'link',
            render: (text, record) => (
                <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@n6zkan`} value={text} onChange={this.onDetailChange.bind(this, record.key, 'link')}/>
            )
        }];

        return (
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@wkuui1`}
                className="portal-esetting-dialog"
                visible={true}
                title={getLabel(19342, '详细设置')}
                icon="icon-coms-portal"
                iconBgcolor='#1a57a0'
                style={{width: 1037, height: 492}}
                hasScroll={true}
                buttons={this.getButtons()}
                onCancel={this.onCancel}
            >
                <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@2lpa6k`} showGroup={true} title={getLabel(386589, '标题栏设置')} items={this.getItems()} col={1}/>
                <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@tw2pvi`} columns={columns} dataSource={this.state.eSlideDetail} pagination={false}/>
                <div style={{margin: '25px'}}>
                    <div>
                        <p><span className="portal_slide_detail">{getLabel(125776,"说明:")}</span></p>
                        <p><span className="portal_slide_detail">{getLabel(390855,"1、建议主图片大小为2000像素*160像素")}</span></p>
                        <p><span className="portal_slide_detail">{getLabel(390856,"2、建议导航样式背景图大小为150像素*40像素")}</span></p>
                        <p><span className="portal_slide_detail">{getLabel(390857,"3、建议导航样式前景图大小为165像素*40像素")}</span></p>
                        <p><span className="portal_slide_detail">{getLabel(502246,"4、设置了主图片，建议设置导航图")}</span></p>
                    </div>
                </div>
            </WeaDialog>
        );
    }

    getButtons() {
        let buttons = [];
        buttons.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@jl72z2`} type="primary" onClick={this.onOk}>{getLabel(826, '确定')}</Button>);
        buttons.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@wf9wof`} type="ghost" onClick={this.onCancel}>{getLabel(31129, '取消')}</Button>);
        return buttons;
    }

    onDetailChange(key, type, value) {
        const {eSlideDetail} = this.state;
        eSlideDetail[key][type] = value;
        this.setState({eSlideDetail: eSlideDetail});
    }

    onOk() {
        const { eSlideDetail, showTitle, fontSize, showType } = this.state;
        let isPass = true;
        if(this.state.showTitle == '1'){
            eSlideDetail.map((item,index) => {
                if(item.title == '') {
                    this[`weaError_${index}`].showError();
                    isPass = false;
                    return;
                }
            });
        }
        isPass && this.props.onOk(eSlideDetail, showTitle, fontSize, showType);
    }

    onCancel() {
        this.props.onCancel();
    }
}